<template>
  <div class="chat-container">
    <div class="chat-header">
      <h2>客服对话</h2>
    </div>
    <div class="chat-box" ref="chatBox">
      <div v-for="(message, index) in messages" :key="index" :class="['message', message.sender]">
        <p>{{ message.text }}</p>
      </div>
    </div>
    <div class="chat-input">
      <input v-model="userMessage" @keyup.enter="sendMessage" placeholder="输入消息..." />
      <button @click="sendMessage">发送</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userMessage: '', // 用户输入的消息
      messages: [       // 初始化消息数组
        { sender: 'bot', text: '您好！请问有什么可以帮助您的吗？' },
      ],
    };
  },
  methods: {
    sendMessage() {
      if (this.userMessage.trim() !== '') {
        // 用户发送消息
        this.messages.push({ sender: 'user', text: this.userMessage });
  
        // 在用户发送消息后，确保滚动到底部
        this.$nextTick(() => {
          this.scrollToBottom();
        });
  
        // 关键词判断
        let botResponse = '';
        if (this.userMessage.includes('到') || this.userMessage.includes('发货')) {
          const randomResponse = Math.random() > 0.5 ? '已经发货' : '正在路上';
          botResponse = `客服：${randomResponse}`;
        } else if (this.userMessage.includes('退货') || this.userMessage.includes('不想要了')) {
          botResponse = '客服：非常抱歉，我们不支持退货服务。';
        } else {
          botResponse = '客服：亲~换个问题问我吧！';
        }
  
        // 模拟客服消息回复
        setTimeout(() => {
          this.messages.push({ sender: 'bot', text: botResponse });
  
          // 客服消息回复后，确保滚动到底部
          this.$nextTick(() => {
            this.scrollToBottom();
          });
        }, 1000);
  
        // 清空用户输入框
        this.userMessage = '';
      }
    },
    scrollToBottom() {
      const chatBox = this.$refs.chatBox;
      chatBox.scrollTop = chatBox.scrollHeight;
    },
  },
  mounted() {
    // 组件加载完成时，初始化时滚动到底部
    this.scrollToBottom();
  },
};
</script>

<style scoped>
.chat-container {
  width: 100%;
  max-width: 100%; /* 适应屏幕 */
  margin: 0;
  padding: 10px;
  border: none;
  background-color: #f9f9f9;
  display: flex;
  flex-direction: column;
  height: 100vh;
  box-sizing: border-box; /* 确保边框不影响布局 */
}

.chat-header {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.chat-box {
  flex-grow: 1;
  overflow-y: auto;
  padding: 15px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 15px;
  box-sizing: border-box; /* 确保边框不会影响布局 */
}

.message {
  margin: 8px 0;
  padding: 10px;
  border-radius: 8px;
  max-width: 70%;
  word-break: break-word;
}

.message.user {
  background-color: #e0ffe0;
  align-self: flex-end;
}

.message.bot {
  background-color: #e0f7fa;
}

.chat-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  border-top: 1px solid #ddd;
  box-sizing: border-box; /* 确保边框不影响布局 */
}

.chat-input input {
  width: 80%;
  padding: 10px;
  font-size: 14px;
  border-radius: 5px;
  border: 1px solid #ccc;
  outline: none;
}

.chat-input button {
  width: 15%;
  padding: 10px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 14px;
}

.chat-input input:focus {
  border-color: #007BFF;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.chat-input button:disabled {
  background-color: #ccc;
}
</style>
